<template>
	<ToolbarItemContainer ref="container" :iconFile="evaluateIcon" title="兼职订单" :needBottomPopup="true"
		:iconWidth="isUniFrameWork ? '26px' : '20px'" :iconHeight="isUniFrameWork ? '26px' : '20px'"
		@onDialogShow="onDialogShow" @onDialogClose="onDialogClose">
		<div :class="['evaluate', !isPC && 'evaluate-h5']">
			<div :class="['evaluate-header', !isPC && 'evaluate-h5-header']">
				<div :class="[
            'evaluate-header-content',
            !isPC && 'evaluate-h5-header-content',
          ]">
					{{ TUITranslateService.t("信息确认") }}
				</div>
				<div v-if="!isPC" :class="[
            'evaluate-header-close',
            !isPC && 'evaluate-h5-header-close',
          ]" @click.stop="closeDialog">
					{{ TUITranslateService.t("关闭") }}
				</div>
			</div>
			<div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
				<ul :class="[
            'evaluate-content-list',
            !isPC && 'evaluate-h5-content-list',
          ]">
					<!--          <li
            v-for="(item, index) in starList"
            :key="index"
            :class="[
              'evaluate-content-list-item',
              !isPC && 'evaluate-h5-content-list-item',
            ]"
            @click.stop="selectStar(index)"
          >
            <Icon
              v-if="index <= currentStarIndex"
              :file="starLightIcon"
              :width="isPC ? '20px' : '30px'"
              :height="isPC ? '20px' : '30px'"
            />
            <Icon
              v-else
              :file="starIcon"
              :width="isPC ? '20px' : '30px'"
              :height="isPC ? '20px' : '30px'"
            />
          </li> -->
					<!-- 					<li style="display: flex;align-items: center;">
						<div>职位选择：</div>
						<select style="background: #fff;border:none;" v-model="selected" @change="test">
							<option v-for="option in options" :value="option.value" :key="option.value">
								{{ option.text }}
							</option>
						</select>
					</li> -->
				</ul>
				<!-- 				<textarea v-model="comment" :class="[
            'evaluate-content-text',
            !isPC && 'evaluate-h5-content-text',
          ]" /> -->
				<div :class="[
            'evaluate-content-button',
            !isPC && 'evaluate-h5-content-button',
          ]">
					<button :class="['btn', price&&num ? 'btn-valid' : 'btn-invalid']" @click="submitEvaluate">
						{{ TUITranslateService.t("发送") }}
					</button>
				</div>
			</div>
			<div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
				<!-- 				{{ TUITranslateService.t("Evaluate.服务评价工具") }}
				{{ "(" + TUITranslateService.t("Evaluate.使用") }}
				<a @click="openLink(Link.customMessage)">
					{{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
				</a>
				{{ TUITranslateService.t("Evaluate.搭建") + ")" }} -->
				<div>职位选择：</div>
				<div style="display: flex;align-items: center;height: 40px;justify-content: space-between;">
					<div style="padding: 5px 8px;background:#6B64D3;border-radius: 4px;color: #fff;" @click="isChooseTo">{{selectedOptionValue?selectedOptionValue:'请选择职业'}}</div>
					<div v-if="isChoose" style="position: absolute;top:0;left:0;right:0;bottom: 0;background: #fff;">
						<input v-model="zhiye" style="width: 90%;height: 30px;background: #eee;border-radius: 4px;margin-left:5%;padding-left: 2%;margin-top: var(--status-bar-height);" />
						<div style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 10px;">
							<div :style="{
								padding:'5px 8px',
								marginTop:'5px',
								marginLeft: '8px',
								background: chooseIndex == index ? '#6B64D3' : '#eee',
								borderRadius: '4px',
								color: chooseIndex == index ? '#fff' : 'initial'
								}" v-for="(item,index) in options" :key="index" @click="toChoose(index)">
								{{item.text}}
							</div>
						</div>
					</div>
				</div>
				<div>薪资范围：</div>
				<div style="display: flex;align-items: center;height: 40px;justify-content: space-between;">
					<div style="display: flex;align-items: center;height: 40px;">
						<span>单价：</span>
						<input
							style="width: 60px;height: 30px;background: #eee;border-radius: 4px;margin-left:5px;margin-right: 5px;padding-left: 10px;"
							v-model="price" />
						<span style="display: flex;">元/单;</span>
					</div>
					<div style="display: flex;align-items: center;height: 40px;">
						<span>数量：</span>
						<input
							style="width: 60px;height: 30px;background: #eee;border-radius: 4px;margin-left:5px;margin-right: 5px;padding-left: 10px;"
							v-model="num" />
						<span>单</span>
					</div>
				</div>
				<div>结算方式：</div>
				<div style="display: flex;align-items: center;height: 40px;justify-content: space-between;">
					<div v-for="(item ,index) in typeList" :key="index" :style="{  
						width: '60px',
						height: '30px',
						background: jieIndex == index ? '#6B64D3' : '#eee',
						borderRadius: '4px',
						display: 'flex',  
						justifyContent: 'center',  
						alignItems: 'center',  
						color: jieIndex == index ? '#fff' : 'initial'
						}" @click="toChange(index)">{{item}}</div>
				</div>
				<div style="display: flex;height: 40px;margin-top: 20px;">
					<div style="margin-left: auto;">结算薪资：<span
							style="color: #ef1e1ede;">￥{{(Number(price)?Number(price):0)*(Number(num)?Number(num):1)}}</span>
					</div>
				</div>
			</div>
		</div>
	</ToolbarItemContainer>
</template>
<script setup lang="ts">
	import TUIChatEngine, {
		TUITranslateService,
		TUIStore,
		StoreName,
		IConversationModel,
		TUIChatService,
		SendMessageParams,
		SendMessageOptions,
	} from '@tencentcloud/chat-uikit-engine';
	import { ICustomMessagePayload } from '../../../../interface';
	import { ref, computed } from '../../../../adapter-vue';
	import ToolbarItemContainer from '../toolbar-item-container/index.vue';
	import evaluateIconLight from '../../../../assets/icon/evalute-light.svg';
	import evaluateIconDark from '../../../../assets/icon/evalute-dark.svg';
	import pay from '../../../../assets/icon/pay.svg';
	import Link from '../../../../utils/documentLink';
	import Icon from '../../../common/Icon.vue';
	import starIcon from '../../../../assets/icon/star.png';
	import starLightIcon from '../../../../assets/icon/star-light.png';
	import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
	import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
	import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
	import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
	import TUIChatConfig from '../../config';
	import { onLoad, onUnload } from '@dcloudio/uni-app';
	// onLoad(res => {
	
	// })
	const isCustom = ref<ICustomMessagePayload>({
		businessID: '',
	});
	const options = ref([
		{ value: 0, text: '视频剪辑师' },
		{ value: 12, text: '调音师' },
		{ value: 11, text: '调音师' },
		{ value: 11232, text: '调音师' },
		{ value: 1132, text: '调音师' },
		{ value: 1123, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 11232, text: '调音师' },
		{ value: 1132, text: '调音师' },
		{ value: 1123, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1231, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
		{ value: 1, text: '调音师' },
	])
	const isChoose = ref(false)
	const isChooseTo = () => {
		isChoose.value = true
	}
	const zhiye=ref('')
	const chooseIndex = ref(0)
	const toChoose = (index : number) => {
		chooseIndex.value = index
		selectedOptionValue.value = options.value[chooseIndex.value].text
		isChoose.value = false
	}
	const price = ref()
	const num = ref()
	const typeList = ref(['单结', '日结', '月结'])
	const jieIndex = ref(0)
	const toChange = (index : number) => {
		jieIndex.value = index
	}
	const selectedOptionValue = ref('')
	// const potionChange = (event:Event) => {
	// 	console.log(event.target.value)
	// 	uni.showModal({
	// 		title:'职业',
	// 		content: `${event.target.value}`
	// 	})
	// }
	const evaluateIcon = pay;
	const props = defineProps({
		starTotal: {
			type: Number,
			default: 5,
		},
	});
	const emits = defineEmits(['onDialogPopupShowOrHide']);

	const container = ref();

	const starList = ref<number>(props.starTotal);
	const currentStarIndex = ref<number>(-1);
	const comment = ref('');
	const currentConversation = ref<IConversationModel>();

	TUIStore.watch(StoreName.CONV, {
		currentConversation: (conversation : IConversationModel) => {
			currentConversation.value = conversation;
		},
	});

	const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);

	const onDialogShow = () => {
		emits('onDialogPopupShowOrHide', true);
	};

	const onDialogClose = () => {
		resetEvaluate();
		emits('onDialogPopupShowOrHide', false);
	};

	const openLink = () => {
		if (isPC || isH5) {
			window.open(Link?.customMessage?.url);
		}
	};

	const closeDialog = () => {
		container?.value?.toggleDialogDisplay(false);
	};

	const resetEvaluate = () => {
		currentStarIndex.value = -1;
		comment.value = '';
	};

	const selectStar = (starIndex ?: any) => {
		if (currentStarIndex.value === starIndex) {
			currentStarIndex.value = currentStarIndex.value - 1;
		} else {
			currentStarIndex.value = starIndex;
		}
	};

	const submitEvaluate = () => {
		// The evaluate message must have at least one star or comment to be submitted.
		// if (currentStarIndex.value < 0 && !comment.value.length) {
		// 	return;
		// }
		const payload = {
			data: JSON.stringify({
				businessID: 'pay',
				job: selectedOptionValue.value,
				price: price.value,
				num: num.value,
				type: typeList.value[jieIndex.value]
			})
		};
		const options = {
			to:
				currentConversation?.value?.groupProfile?.groupID
				|| currentConversation?.value?.userProfile?.userID,
			conversationType: currentConversation?.value?.type,
			payload,
			needReadReceipt: isEnabledMessageReadReceiptGlobal(),
		};
		const offlinePushInfoCreateParams : IOfflinePushInfoCreateParams = {
			conversation: currentConversation.value,
			payload: options.payload,
			messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
		};
		const sendMessageOptions : SendMessageOptions = {
			offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
		};
		TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
		// close dialog after submit evaluate
		container?.value?.toggleDialogDisplay(false);
	};
</script>
<style scoped lang="scss" src="./style/index.scss"></style>